HTML5 アプリにおけるパフォーマンスの基礎知識
https://gyazo.com/6176bf895f8009bae8172da0f6ce15a5
「HTML/CSS/JSで構成されたもの」を想定しています
パフォーマンスを気にする理由
ネイティブより遅いのは事実
ちゃんと実装を考えないとしんどくなる
機能追加は転送量の増加も招く
優れたUXは１つの価値の差別化
パフォーマンスを向上させよう！
PWA Checklist
ベースライン要件
模範的なPWA
パフォーマンス
WEBアプリのパフォーマンス
パフォーマンスの指標
すぐに表示される
軽快に動作する
改善の方法
JS処理の高速化
アルゴリズムの改善
どこがボトルネックになっているかを考える
処理の並列化・マルチスレッド、バックグラウンド実行
処理の高速化、チューニングされたC資産の利用
GPUによる処理の高速化
バックグラウンド処理
スタイルの最適化
必要リソースの削減
Loadingは引き算の考え方が必要＝必要なリソースを選定する
無駄をなくす
どうしようもなくなったら
静的サイト
Regular 3G（750kbps, 100ms RTT）でも快適にできるか？
開発者が楽にする必要はある、がそれでユーザーを負担させていいのか？
それでもどうしようもなくなったら
リソース先読み
パフォーマンスの測定
Webサイトの解析ツール
これからのWeb設計
後付でPWAにするのは難しい
最初からPWA意識した設計にする
PWAファースト（Lighthouseでスコアがでるようにする）
PWAの作り方
SPAをしっかりつくる
パフォーマンス・チューニングを頑張る
後からのパフォーマンス改善も大変
パフォーマンスファーストな設計を目指す
これからのハイパフォーマンスアプリ
Web標準も「パフォーマンス追求」の方向性へ
後付で対応するというのは非常に大変
エンジニアだけでは難しい
デザイナー、ディレクター…みんなでパフォーマンスを考えましょう
まとめ
ハイパフォーマンスを実現すべきために必要な対策を紹介
優れたUXを提供
最初からパフォーマンス考慮した設計を目指す
モバイルファースト
PWAファースト
パフォーマンスファースト